<template>
  <div class="videolist">
    <div class="taglist" ref="taglist">
      <svg @click.stop="$refs.taglist.scrollLeft -= 30" style="left: 0;transform:rotate(180deg)" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
        stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-right">
        <path d="M9 6l6 6l-6 6"></path>
      </svg>
      <span @click="changeTab(-1, '')" :class="tabIndex == -1 ? 'active' : ''">ALL</span>
      <span @click="changeTab(index, item.id)" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tablist"
        :key="index">{{ item.cateName }}</span>
      <svg @click.stop="$refs.taglist.scrollLeft += 30" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
        stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-right">
        <path d="M9 6l6 6l-6 6"></path>
      </svg>
    </div>
    <div class="videos">
      <Waterfall :list="videos" :gutter="15" :width="310" style="background-color: rgb(204 204 204 / 0%);">
        <template #item="{ item }">
          <div class="li" style="width: 100%;">

            <video :id="'video' + item.id" :loop="true" :src="item.videoUrl" :muted="true" :autoplay="true"
              @click="toInfo(item)"></video>
            <div class="more">
              <!-- <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="tabler-icon tabler-icon-dots-vertical"
                filter="drop-shadow(1px 1px 2px rgb(0 0 0 / 50%)) drop-shadow(0px 5px 15px rgb(0 0 0 / 60%))">
                <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
              </svg> -->
            </div>
            <div class="caozuo">
              <!-- <div class="flex">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                  class="tabler-icon tabler-icon-plus">
                  <path d="M12 5l0 14"></path>
                  <path d="M5 12l14 0"></path>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                  class="tabler-icon tabler-icon-mood-smile">
                  <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                  <path d="M9 10l.01 0"></path>
                  <path d="M15 10l.01 0"></path>
                  <path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
                </svg>
              </div> -->

              <div class="flex" @click="collect(item, 4)" style="cursor: pointer;">
                👍
                {{ item.likeCount }}
              </div>
              <!-- <div class="flex">
                ❤️
                {{item.loveCount}}
              </div>
              <div class="flex">
                😂
                {{item.cryCount}}
              </div> -->
              <!-- <div class="flex huizhang">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="yellow.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="tabler-icon tabler-icon-bolt" style="fill: rgb(245, 159, 0);">
                  <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path>
                </svg>
                40
              </div> -->
            </div>
          </div>
        </template>
      </Waterfall>




    </div>

    <div style="height: 140px;"></div>
  </div>
</template>

<script>
import { LazyImg, Waterfall } from 'vue-waterfall-plugin'
import ElementUI from "element-ui";
import 'vue-waterfall-plugin/dist/style.css'

export default {
  components: { Waterfall, LazyImg },
  name: "videolist",
  data() {
    return {
      tablist: [],
      tabIndex: -1,
      categoryId: '',
      title: '',
	  limit:20,
	  querying:false,
	  pageFlag:true,
	  page:1,
      videos: [],
    };
  },
  mounted() {
    this.getCates();
    this.getTopics();
  },
  methods: {
    changeTab(index, id) {
      this.tabIndex = index;
      this.categoryId = id;
      this.page = 1;
      this.pageFlag = true;
	  this.videos = [];
      this.getTopics()
    },
    toInfo(item) {
      this.$router.push({ path: '/Info', query: { id: item.id } })
    },
    getCates() {
      this.$api.bbsCategorys().then(res => {
        console.log(res, 'res');
        this.tablist = res;
      })
    },
	nextPage(){
		if(this.pageFlag && !this.querying){
			this.page++;
			this.getTopics();
		}
	},
	search(title){
		this.title = title ? title : '';
		this.page = 1;
		this.pageFlag = true;
		this.videos = [];
		this.getTopics()
	},
    getTopics(title) {
      
      this.$emit("startSearch", '')
	  this.querying = true;
      this.$api.topics({ categoryId: this.categoryId, title: this.title,page:this.page,limit:this.limit }).then(res => {
        this.$emit("finishSearch", '')
		this.querying = false;
        //this.videos = res;
		
		if(res.length < this.limit){
		  this.pageFlag = false;
		}
		for (let i in res) {
		  this.videos.push(res[i]);
		}
      })
    },
    collect(item, type) {
      let data = {
        type: type,
        objectName: item.title,
        objectId: item.id,
      }
      this.$api.collect(data).then(res => {
        ElementUI.Message({ message: 'Success~', type: 'success', duration: 2000 })
        item.likeCount += 1;

      })
    },

  },
};
</script>

<style lang="scss" scoped>
.videolist {
  width: 87%;
  margin: 0 auto;
  overflow-x: scroll;
}

.videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .li {
    width: 19%;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 15px;
    position: relative;
    cursor: pointer;
    border: 1px solid #373a40;
    overflow: hidden;

    video {
      width: 100%;
      object-fit: cover;
      background-image: linear-gradient(100deg, #F97794 10%, #373a40 100%);
      padding-right: 3px;
    }

    .more {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .caozuo {
      position: absolute;
      left: 10px;
      bottom: 10px;
      box-sizing: border-box;
      display: flex;
      flex-flow: row;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: start;
      justify-content: flex-start;
      gap: 4px;
      border-radius: 4px;
      background: rgba(37, 38, 43, 0.6);
      backdrop-filter: blur(5px) saturate(160%);
      box-shadow: rgba(0, 0, 0, 0.16) 0px -2px 6px 1px;
      padding: 4px;

      .flex {
        display: flex;
        align-items: center;
        margin-right: 5px;
      }

      .huizhang {
        font-size: 11px;
        height: 20px;
        line-height: 18px;
        text-decoration: none;
        box-sizing: border-box;
        display: inline-flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: auto;
        text-transform: uppercase;
        border-radius: 2px;
        font-weight: 700;
        letter-spacing: 0.25px;
        cursor: inherit;
        text-overflow: ellipsis;
        overflow: hidden;
        background: rgba(240, 140, 0, 0.2);
        color: rgb(245, 159, 0);
        border: 1px solid transparent;
        padding: 10px 3px;
      }
    }

  }
}

.videolist::-webkit-scrollbar {
  //隐藏或取消滚动条
  display: none;
}

.taglist {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 20px;

  .active {
    background-color: rgb(25, 113, 194);
  }

  svg {
    position: sticky;
    right: 0;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.40);
    height: 28px;
    min-height: 28px;
    width: 28px;
    min-width: 28px;
    cursor: pointer;
    display: none;
    z-index: 100;
  }

  span {
    padding: 0px 8px;
    appearance: none;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    height: 26px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    width: auto;
    border-radius: 4px;
    font-weight: 600;
    position: relative;
    line-height: 1;
    font-size: 14px;
    user-select: none;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: rgb(52, 58, 64);
    color: rgb(254, 254, 254);
    text-transform: uppercase;
    margin-right: 8px;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  // span:hover {
  //   background-color: rgb(33, 37, 41);
  // }
}

// @media screen and (max-width:768px) {
//   .videolist {
//     width: 95%;
//   }

//   .taglist {
//     width: 100%;
//     overflow-x: scroll;

//     svg {
//       display: block;
//     }
//   }

// }

</style>
